<template>
  <div class="depart-introduction">
    <Head></Head>
    <DepartHeader :backText="backText"></DepartHeader>
    <div class="intro-countdown">{{ countdown }}s</div>
    <div class="mask">
      <div class="depintroduction-content">
        <span>【科室简介】</span>
        <div class="introTxt">{{ departmentIntroduction }}</div>
      </div>
    </div>
    <div class="docterIntro-content">
      <span class="docter-text">【医生简介】</span>
      <div
        class="doctor-introdution"
        v-for="docter in docterList"
        :key="docter.id"
      >
        <div class="docter-image">
          <img :src="docterImg" alt="" />
        </div>
        <div class="docter-brife">
          <div class="docter-top">
            <span class="docter-name">{{ docter.doctorName }}</span>
            <span class="docter-title">({{ docter.titleName }})</span>
          </div>
          <div class="docter-goodat">{{ docter.doctorIntroduction }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import docterImg from "@/assets/images/docter-default.png";
const countdown = ref(500);
import { getDoctorsListApi } from "@/api/departments";
import type { Docter } from "../type";
const route = useRoute();
const docterList = ref<Docter[]>([]);
const backText = "返回科室列表";
//类型断言
const { departmentId, departmentIntroduction } = route.query;
onMounted(() => {
  getDocterListById();
});
const getDocterListById = async () => {
  const { result } = await getDoctorsListApi(departmentId as string);
  console.log(result);
  docterList.value = result;
};
</script>
<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.depart-introduction {
  @include container;

  .intro-countdown {
    position: fixed;
    right: 3vw;
    top: 7vh;
    font-size: 50px;
    color: red;
  }
  .depintroduction-content {
    width: 92%;
    height: 48vh;

    margin: 0 4%;
    color: #4962a3;
    font-size: 40px;
    line-height: 60px;
    span {
    }
  }
  .mask {
    width: 100%;
    height: 48vh;
    position: relative;
  }
  .mask::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.01)
    );
  }
  .doctor-introdution {
    padding: 30px;
    height: fit-content;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    margin: 28px auto;
    .docter-image {
      width: 155px;
      height: 215px;
      margin-right: 30px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .docter-brife {
      flex: 1;
      padding-top: 10px;
      .docter-top {
        display: flex;
        align-items: center;
        color: #4962a3;
        margin-bottom: 20px;
        .docter-name {
          font-size: 40px;
          font-weight: 500;
          margin-right: 20px;
        }
        .docter-title {
          font-size: 28px;
        }
      }
      .docter-goodat {
        font-size: 32px;
        color: #97a0b5;
        line-height: 40px;
      }
    }
  }
  .docterIntro-content {
    width: 92%;
    margin: 4% auto;
  }
  .docter-text {
    color: #4962a3;
    font-size: 40px;
  }
}
</style>
